<!-- 我的 - 学习记录 -->
<template>
  <view class="bg-#f6f6f6 min-h-screen">
    <z-paging-list ref="list" v-model="state.list" :safe-area-inset-bottom="false" @loadData="loadData">
      <template #top>
        <z-navbar title="学习记录" :border-bottom="true"></z-navbar>
        <u-tabs bg-color="none" :is-scorll="false" :list="tabList" bar-height="6" bar-width="44" active-color="#333"
          inactive-color="#999" font-size="32" :bar-style="barStyle" v-model="state.currentIndex"
          @change="refresh"></u-tabs>
      </template>
      <view class="px-4 pt-5">
        <template v-if="state.currentIndex == 0">
          <online-course-item v-for="(item, index) in state.list" :key="index" :data="item" />
        </template>
        <template v-if="state.currentIndex == 1">
          <live-item v-for="(item, index) in state.list" :key="index" :data="item" />
        </template>
        <template v-if="state.currentIndex == 2">
          <offline-course-item v-for="(item, index) in state.list" :key="index" :data="item" />
        </template>
      </view>
    </z-paging-list>
  </view>
</template>

<script setup>
import onlineCourseItem from '@/package_user/components/online-course-item.vue'
import liveItem from '@/package_user/components/live-item.vue'
import offlineCourseItem from '@/package_user/components/offline-course-item.vue'
import { getUseroOnlineCourse, getUserLive, getUseroOfflineCourse } from '@/common/http/module/center.js'

const list = ref();
const state = reactive({
  currentIndex: 0,
  currentId: 0,
  list: []
});

const tabList = [
  { id: 0, name: '线上课程' },
  { id: 1, name: '直播' },
  { id: 2, name: '线下课程' }
]
const barStyle = {
  backgroundColor: '#F4AF22'
}

function refresh () {
  list.value.onRefresh()
}

function loadData (page) {
  const tabPostList = [
    { currentIndex: 0, postMethod: getUseroOnlineCourse },
    { currentIndex: 1, postMethod: getUserLive },
    { currentIndex: 2, postMethod: getUseroOfflineCourse },
  ]
  tabPostList[state.currentIndex].postMethod(page).then(res => {
    list.value.onLoadResult(page ? res.data?.data : []);
  })
}

onLoad((options) => {
  state.currentIndex = options?.currentIndex ?? 0
  loadData;
});
</script>

<style lang="scss" scoped>
:deep(.u-tabs) {
  width: 100% !important;
}

:deep(.u-scroll-box) {
  display: flex;
}

:deep(.u-tab-item) {
  flex: 1;
}
</style>
